<template>
  <div class="loginPage">
    <div class="login-color"></div>
    <p class="login-title">云快选管理中心</p>
    <div class="login-from">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <div class="mb-[20px]">
            <van-field
              size="large"
              v-model="loginForm.username"
              placeholder="请输入账号"
              required
              :rules="[{ required: true, message: '请输入账号' }]"
            />
          </div>
          <div class="mb-[20px]">
            <van-field
              size="large"
              type="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
              required
              :rules="[{ required: true, message: '请输入密码' }]"
            />
          </div>
          <div>
            <van-field
              size="large"
              required
              v-model="loginForm.code"
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
            >
              <template #button>
                <div>
                  <img
                    :src="codeUrl"
                    @click="getCode"
                    class="login-code-img"
                    alt=""
                  />
                </div>
              </template>
            </van-field>
          </div>
        </van-cell-group>

        <div class="mt-[40px] px-[20px]">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { doPostLogin, getCodeImg } from "./fetchData";
import { LoginData } from "./types";
import { setToken } from "@/utils/auth";
import { showSuccessToast } from "vant";

const router = useRouter();
const loginForm = ref<LoginData>({
  tenantId: "918893",
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  uuid: "",
  deviceType: "wiki",
  grantType: "password"
} as LoginData);
const codeUrl = ref("");

/**
 * 获取验证码
 */
async function getCode() {
  const res = await getCodeImg();
  const { data } = res;
  codeUrl.value = "data:image/gif;base64," + data.img;
  loginForm.value.uuid = data.uuid;
}

// 登录
function onSubmit() {
  doPostLogin(loginForm.value).then(res => {
    showSuccessToast("登录成功");
    const data = res.data;
    setToken(data.access_token);
    router.push({ name: "Home" });
  });
}

getCode();
</script>

<style lang="less" scoped>
.loginPage {
  height: 100%;
  background: url("./assets/lg-bg.png") 0 0 no-repeat;
  background-size: contain;
  padding-top: 12rem;

  .login-title {
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    font-weight: 700;
    color: #707070;
  }

  .login-color {
    height: 2rem;
    border-top: 0.2rem solid #fff;
    border-radius: 1.2rem 1.2rem 0 0;

    background: linear-gradient(
      180deg,
      #ddeaff 1%,
      rgba(255, 255, 255, 0.95) 99%
    );
  }
  .login-from {
    height: calc(100% - 2rem);
    background-color: #fff;
    /deep/ .van-field {
      background: #f2f4f7;
      border-radius: 1.2rem;
    }

    .login-code-img {
      width: 4rem;
      height: 2rem;
    }
  }
  .warp-header-arrow-lf {
    color: #fff;
    position: absolute;
    left: 1.2rem;
    top: 1rem;
  }
}
</style>
